<template>
	<view class="wrap">
		<!--    <u&#45;&#45;image :showLoading="true" src="/static/personal/invite_bg.png" width="100vw" height="100vh" class="bg"></u&#45;&#45;image>-->

		<button class="btn" :plain="true" @click="share">立即邀请好友</button>

		<view class="teamBox">
			<view class="title">
				<view class="left">我的团队</view>
				<view class="right">邀请好友，和ta一起赚大钱哦~</view>
			</view>
			<view class="teamWrap">
				<view class="teamNum">
					<view class="item">
						<view class="num">已邀请好友</view>
						<view class="text">{{teamMember}}</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<view class="num">累计收益</view>
						<view class="text">{{totalIncome}}</view>
					</view>
				</view>
				<view class="memberList" v-if="list.length > 0">
					<view class="member_box" v-for="(item,index) in list" :key="index">
						<view style="display: flex;align-items: center;">
							<u--image :showLoading="true"
								:src="item.avatar||'https://hanchenwh.oss-cn-shenzhen.aliyuncs.com/fd1504d834f7f2d38b3ae0efab661d053826447466e872799d69b8e1a9ed0d18.png'"
								radius="35" width="70rpx" height="70rpx" style="margin-right: 15rpx;" />
							<view class="member_time">
								<view class="member_name">{{item.nickName}}</view>
								<view class="">ID:{{item.id}}</view>
							</view>
						</view>
						<view class="member_time">{{ $u.timeFormat(item.createTime, 'yyyy/mm/dd hh:MM:ss') }}</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>
<script>
	import {
		Api
	} from "../../service/api";
	import {
		mapActions
	} from 'vuex'

	export default {
		name: "invite",
		data() {
			return {
				list: [],
				pageObj: {
					pageSize: 9,
					pageNum: 0,
					status: 'loading'
				},
				totalIncome: 0,
				teamMember: 0,
			}
		},
		onShareAppMessage(res) {
			console.log('>> 分享 > ', JSON.stringify(res))
			// 返回分享信息
			return {
				title: '汉辰剧场',
				path: '/pages/benefit/index?inviteCode=' + this.userInfo.myInviteCode,
			}
		},
		async onLoad() {
			this.userInfo = await this.getInfoMethod()
			this.getList()
			this.getNumberCard()
			this.getMemberCard()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			...mapActions('userInfo', ['getInfoMethod']),
			getList() {
				if (this.pageObj.status === 'nomore') return
				this.pageObj.status = 'loading'
				Api.getSubordinatePage({
					pageNo: ++this.pageObj.pageNum,
					pageSize: this.pageObj.pageSize,
					type: 1,
				}).then(res => {
					this.list = this.list.concat(res.data.list)
					if (this.list.length < res.data.total) this.pageObj.status = 'loadmore'
					else this.pageObj.status = 'nomore'
				})
			},
			getNumberCard() {
				Api.getCardData().then(res => {
					// this.todayIncome = (res.data.todayIncome / 100) || 0 // 今日收益
					this.totalIncome = (res.data.totalIncome / 100) || 0 // 累计收益
				})
			},
			getMemberCard() {
				Api.getDistributionTeamCardData().then(res => {
					this.teamMember = res.data.teamMember || 0
					// this.apprentice = res.data.apprentice || 0 // 徒弟
					// this.grandson = res.data.grandson || 0 // 徒孙
				})
			},
			share() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
				// uni.shareWithSystem({
				// 	summary: '',
				// 	href: '/pages/benefit/index?inviteCode=' + this.userInfo.myInviteCode,
				// 	success: () => {

				// 	},
				// 	fail: () => {}
				// })
			}
		}
	}
</script>


<style scoped lang="scss">
	.wrap {
		//position: relative;
		//padding-bottom: 100rpx;
		padding-top: 580rpx;
		background-image: url("https://hanchenwh.oss-cn-shenzhen.aliyuncs.com/f879f157bfb82ce91defde56d477ce3c844bcc779430e208958102d34966454f.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: calc(100vh - 580rpx);


		.bg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.btn {
			width: 85%;
			height: 80rpx;
			margin: 0 auto 0;
			border-radius: 60rpx;
			background-color: #E81F4B;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			//padding-top: 400rpx;
			font-size: 32rpx;
			border: none;
		}

		button:after {
			content: none;
		}

		.teamBox {
			border-radius: 30rpx;
			background-color: #FF5972;
			width: 86%;
			margin: 60rpx auto 100rpx;
			padding: 30rpx;

			.title {
				display: flex;
				justify-content: space-between;
				color: #ffffff;
				margin-bottom: 30rpx;
				font-size: 28rpx;
			}

			.teamWrap {
				background-color: #fff;
				border-radius: 30rpx;

				.teamNum {
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding: 20rpx 0;
					font-size: 28rpx;

					.item {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						gap: 10rpx;
					}

					.line {
						height: 70rpx;
						width: 2rpx;
						background-color: #2A2A2A;
					}
				}

				.memberList {
					margin: 0 auto 50rpx;
					display: flex;
					align-items: center;
					flex-direction: column;
					padding: 25rpx;
					gap: 15rpx;
					border-top: 2rpx dotted #DEDEDE;
				}

				.member_box {
					display: flex;
					justify-content: space-between;
					width: 100%;
					color: #5a5a5a;

					.member_time {
						color: #7D7D7D;
						font-size: 25rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.member_name {
							color: #2A2A2A;
							font-size: 24rpx;
							font-weight: bold;
						}

					}
				}
			}
		}
	}
</style>